<template>
	<up-popup
		mode="top"
		:show="show"
		@close="onClosePopup"
		round="30rpx"
	>
		<view class="select-org-box">
			<up-radio-group
				v-model="roleId"
				placement="column"
			>
				<view 
					class="org-item"
					v-for="(item, index) in roles" 
					:key="index"
					:class="{ 'org-item--select': item.roleId === roleId }"
				>
					<view class="org-item-click" @click.stop="onOrgChanges(item)" />
					<up-radio
						activeColor="#2E90EC"
						:label="item.roleName"
						:name="item.roleId"
					/>
					<up-badge
						max="999" 
						:value="99"
						shape="horn"
						absolute
						:offset="[-5, 0]"
					></up-badge> 
				</view>
			</up-radio-group>
		</view>
	</up-popup>
</template>

<script setup name="selectOrg">
import { onMounted, reactive, ref, defineExpose, defineEmits } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { onSetRoleIdData, onGetRoleIdData, onGetRolesData } from "/common/userinfo.js"
const emit = defineEmits(['onOrgChange'])

const show = ref(false)

const roles = ref([])
const roleId = ref('')

const onOrgChanges = async function(row) {
	roleId.value = row.roleId
	onSetRoleIdData(row.roleId)
	emit('onOrgChange', roleId.value)
	onClosePopup()
}

const onClosePopup = function () {
	show.value = false
}

const onShowPopup = async function() {
	await onSetData()
	show.value = true
}

const onSetData = async function() {
	roles.value = await onGetRolesData()
	roleId.value = await onGetRoleIdData() || 1
}

defineExpose({ onShowPopup })

</script>

<style scoped lang="scss">
.select-org-box {
	width: 100%;
	height: auto;
	max-height: 70vh;
	overflow: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 30rpx;
	padding-top: 60rpx;
}

.org-item {
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 20rpx;
	margin-top: 20rpx;
	position: relative;
	background: #F8F8F8;
	transform: all 0.15s;
	
	&:active {
		box-shadow: 0px 11rpx 20rpx 0px rgba(151,151,151,0.35);
	}
}

::v-deep(.u-radio) {
	font-weight: 500;
	font-size: 34rpx;
	color: #333333;
} 

.org-item--select {
	background-color: #E6F0FF;
	border: 1px solid #44A4FF;
}

.org-item-click {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
</style>